<!DOCTYPE html>
<html>

<head>
  
  <meta charset="utf-8">
  <title>添加题目窗口</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
    }

  .container {
      width: 800px;
      margin: 0 auto;
      padding: 30px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(13, 16, 12, 0.1);
    }

  .form-group {
      margin-bottom: 15px;
    }

  label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

  .input {
      width: 96%;
      padding: 12px;
      border: 1px solid #ced4da;
      border-radius: 3px;
    }
    input:focus {
        outline: none;
        border-color: #3F51B5; /* 与登录按钮颜色相匹配 */
    }

  .submit-btn {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <p style="font-size: 26px;text-align: center;margin-top: 10px;margin-bottom: 10px;">请输入题目内容</p>
    <form>
      <div class="form-group">
        <label for="question">题目</label>
        <input type="text" id="question" class="input" placeholder="请输入题目内容">
      </div>
      <div class="form-group">
        <label for="option1">选项 A</label>
        <input type="text" id="option1" class="input" placeholder="请输入A选项内容">
      </div>
      <div class="form-group">
        <label for="option2">选项 B</label>
        <input type="text" id="option2" class="input" placeholder="请输入B选项内容">
      </div>
      <div class="form-group">
        <label for="option3">选项 C</label>
        <input type="text" id="option3" class="input" placeholder="请输入C选项内容">
      </div>
      <div class="form-group">
        <label for="option4">选项 D</label>
        <input type="text" id="option4" class="input" placeholder="请输入D选项内容">
      </div>
      <div class="form-group">
        <label for="correct_answer">答案</label>
        <input type="text" id="correct_answer" class="input" placeholder="请输入正确答案">
      </div>
      <div class="form-group">
        <label for="explain">题目解释</label>
        <input type="text" id="explain" class="input" placeholder="请输入题目解析">
      </div>
      <div class="form-group">
        <label for="difficulty">题目难度</label>
        <input type="number" id="difficulty" class="input" value="1">
      </div>
      <button type="submit" class="submit-btn">提交</button>
    </form>
  </div>
</body>
<script src="https://mirror.fe80.cn/jquery/3.6.1/jquery.min.js"></script>
<script>
    // 提交表单时的处理函数
    document.querySelector('form').addEventListener('submit', function (event) {
      event.preventDefault();

      var question = document.getElementById('question').value;
      var option1 = document.getElementById('option1').value;
      var option2 = document.getElementById('option2').value;
      var option3 = document.getElementById('option3').value;
      var option4 = document.getElementById('option4').value;
      var explain = document.getElementById('explain').value;
      var correct_answer = document.getElementById('correct_answer').value.toUpperCase();
      if(correct_answer=="A"||correct_answer =="B"||correct_answer=="C"||correct_answer=="D"){
        correct_answer = {'A':1,'B':2,'C':3,'D':4}[correct_answer];
      }
      var difficulty = document.getElementById('difficulty').value;
      if(question.length < 1){
        document.getElementById('question').focus();
        return;
      }
      if(option1.length < 1){
        document.getElementById('option1').focus();
        return;
      }
      if(option2.length < 1){
        document.getElementById('option2').focus();
        return;
      }
      if(option3.length < 1){
        document.getElementById('option3').focus();
        return;
      }
      if(correct_answer!=1&&correct_answer!=2&&correct_answer!=3&&correct_answer!=4){
        document.getElementById('correct_answer').focus();
        return;
      }
      // 在这里可以进行数据的处理或发送给服务器
      var data = {
        question_text:question,
        option_a     :option1,
        option_b     :option2,
        option_c     :option3,
        option_d     :option4,
        correct_answer:correct_answer,
        explain      :explain,
        difficulty   :difficulty,
      }
      $.post('https://i.fe80.cn/portal/dun/choice',data,function(res){
          if(res.status){
            alert("提交成功");
          }else{
            alert("提交失败");
          }
      });
    });
  </script>
</html>